<template>
  <div id="header" class="flex content-center container-fluid">
    <div class="header-left flex-1 flex align-items-center">
      <router-link to="/" title="主页" class="self-btn logo s40 hidden-xs-only">
        <svg-icon icon-name="logo" class-name="s40"></svg-icon>
      </router-link>
      <router-link to="/" title="主页" class="self-btn logo s30 hidden-sm-and-up">
        <svg-icon icon-name="logo" class-name="s30"></svg-icon>
      </router-link>
      <HeaderMenu class="hidden-xs-only" style="width: 300px;" />
      <HeaderMenuSelect class="hidden-sm-and-up"/>
      <el-button
        v-if="currentUser.admin"
        size="small"
        icon="el-icon-setting"
        @click="$router.push(`/${$rp.ADMIN}`)"
        class="hidden-sm-and-down"
      />
    </div>
    <template v-if="!$route.meta.hideHeaderSearch">
      <div class="flex-1 flex align-items-center hidden-sm-and-down">
        <HeaderSearch />
      </div>
    </template>
    <div class="header-right flex align-items-center">
      <div class="m-r-16 flex align-items-center hidden-md-and-up">
        <el-button icon="el-icon-search" @click="$router.push('/search')" />
      </div>
      <template v-if="Object.keys(currentUser).length">
        <router-link to="/feedback" class="el-button m-r-32">意见反馈</router-link>
        <HeaderNotifications/>
        <UserDropdown/>
      </template>
      <template v-else>
        <el-button class="go-sign-in" @click="goSignIn">登录 / 注册</el-button>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import HeaderSearch from '@/components/header/HeaderSearch';
import HeaderNotifications from '@/components/notifications/HeaderDropdown';
import HeaderMenu from './HeaderMenu';
import HeaderMenuSelect from './HeaderMenuSelect';
import UserDropdown from './UserDropdown';

export default {
  name: 'Header', // 网站共用页头
  components: { HeaderNotifications, HeaderMenu, HeaderMenuSelect, HeaderSearch, UserDropdown },
  computed: {
    ...mapState(['currentUser']),
  },
  methods: {
    // 前往登录界面
    goSignIn() {
      const signInPath = `/${this.$rp.USERS}/${this.$rp.SIGN_IN}`;
      this.$root.$emit('routerPush', { path: signInPath, query: { redirect: this.$route.path } });
    },
  },
};
</script>

<style lang="scss">
@import '~@/assets/scss/values.scss';

#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: $header-height;
  background-color: #fff;
  box-shadow: 0 $header-shadow-offset-y $header-shadow-blur 0 #ddd;
  z-index: $header-z-index;

  @media screen and (max-width: $sm) { height: $min-header-height; }

  /*.header-left {*/
  /*  position: absolute;*/
  /*  left: 1rem; // 与父组件的 container-fluid 样式一致*/
  /*}*/
  /*.header-right {*/
  /*  position: absolute;*/
  /*  right: 1rem; // 与父组件的 container-fluid 样式一致*/
  /*  top: 0; bottom: 0;*/
  /*}*/

  .self-btn {
    border-radius: .25rem;
    &:hover { background-color: rgba(112,112,112,0.2); }
    &.logo {
      padding: .25rem .5rem;
      margin-left: -0.5rem;
      margin-right: 0.5rem;
      @media screen and (max-width: $sm) { margin-right: 0; }
    }
    &.icon-btn {
      padding: 0.5rem;
      margin-right: 1rem;
      &:hover { color: #2e2e2e; }
    }
  }

  .go-sign-in {
    background-color: #000;
    color: #fff;
  }
}
</style>
